<template>
    <div class="errPage-container">
        <el-button @click="back" icon='arrow-left' size="small">返回</el-button>
        <el-row>
            <el-col :span="12">
                <h1 class="text-jumbo text-ginormous">Oops!</h1>
                <h2>访问受限</h2>
                <br/><br/>
                <h5 class="list-unstyled">
                    <div>或者你可以:</div>
                    <div class="link-type">
                        <router-link to="/">回首页</router-link>
                    </div>
                </h5>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {
        back() {
            this.$router.back()
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../css/defines";
    .errPage-container {
        width: 800px;
        margin: 100px auto;

        .pan-back-btn {
            background: $--color-primary;
            color: #fff;
        }

        .text-jumbo {
            font-size: 60px;
            font-weight: 700;
            color: $--color-primary;
        }

        .list-unstyled {
            font-size: 14px;

            li {
                padding-bottom: 5px;
            }

            a {
                color: $--color-primary;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
</style>
